<template>
    <div id='exam'> 
            <div id="full" class="block_overlay"></div>
            <form id="testForm" name="testForm" action="" method="post">
              <div id="layout">
                <div id="header" style='-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>    
                  <div class="infoNav_2">
                    <ul>
                      <li>
						  <img v-if='!imagePath' src="../../assets/images/blue.jpg" width="86" height="98">
						  <img v-if='imagePath' :src="imagePath" width="86" height="98">
						</li>
                      <li>&nbsp;<br>&nbsp;</li>
                       <li>          
							姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<br>
							性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别<br>
							准考证号<br>
							证件号码
                      </li>
                      <li>
							：{{nickName}}<br>
							：{{gender}}<br>
							：1234<br>
							：111111111111111111
                      </li>
                      <li>&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</li>
                      <li><br></li>
                    </ul>        
                  </div>
                  <div style=" float:right;  margin-right:30px;">      
                   <div style=" float:left;margin-top:34px;font-size: 16px;font-weight: bolder;color: #ffff00;">考试剩余时间：<span id="clock">{{timer}}</span></div>
                   <div style="float:left; margin-top:29px;margin-left:5px;">
					   <input class="submitbutton" name="交卷" type="button" @click="handPaper('0')" value="交 卷">
					   <el-button @click='savePrograss' type="warning" plain size='small'>保存进度</el-button>
					</div>
                  </div>
                  <div style="margin-top:22px;font-weight: bolder;font-size:16px;">2019年度全国会计专业技术资格无纸化考试<br>{{subjectName}}--{{categoryName}}</div>
                </div>
                <div id="main">
                  <div id="leftside"  v-if='showleft' :style='{width:leftsidemainWidth}'> 
                    <div id="leftsidemain" :style='{width:leftWidth}'>
                      <div class="tbox">
                        <div id="tab-content0" class="block">
                          <div id="mainsub0">
							  <template v-for='(item,index) in newExamList'>
								<div class="submenu"  :key='index' v-if='item.data.length'>
									<a :class="item.showsubs?'subShow':'subHide'" @click='showSub(index)' href="javascript:void(0)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.questionTypes}}</a>
									<ul class="myShow"
									v-show='item.showsubs'
									id="sub">
										<li>
											<a id="" v-for='(val,num) in item.data' :key='num' href="javascript:void(0)" @click='clickA(item,num,index)'>{{num + 1}}
												<span id="" style="color: red" v-show="!val.isSign && val.isMake == '0'">*</span>
												<span id="" style="color: red" v-show="!val.isSign && val.isMake == '1'"></span>
												<span id="" style="color: red" v-show="val.isSign">?</span>
											</a>
										</li>
									</ul>
								</div>
							  </template>
                          </div>
                        </div>
                      </div>
                      <div class="submark"> 说明：<br>
                        1.题号右方的“*”符号代表该小题尚未作答。<br>
                        2.题号右方的“?”符号代表该小题做过标记。<br>
                        3.考生作答的同时会自动保存答案。</div>
                      <div class="subcal">
                        <!-- 
                        <input name="计算器" value="" type="button" onclick="useCalculator()">
                        -->
                        <input name="计算器" value="" type="button" @click="showCal">
                      </div>
                    </div>
                    <div class="middlebar">
                      <input name="隐藏" type="button" @click="toggle">
                    </div>
                  </div>
                  <div id="leftside_hiddens" v-if='!showleft'>
                    <input name="显示"  type="button" @click="toggle">
                  </div>
                  <div id="container">
                    <div>
                      <div class='testBox' :style="{width:'100%',height:iframeHeight+'px'}" v-if='this.newExamList.length > 0'>
                        <Choose v-if="this.currectItem.type < 4" @setSign='setSign' :testNum ='currectIndex' :data='currectItem' @getAnswer='getAnswer'></Choose>
                        <Analyze v-else  :testNum ='currectIndex' @setAnswer='setAnswer' @setSign='setSign' :questionHeight='iframeHeight' :data='currectItem' @getAnswer='getAnswer'></Analyze>
                      </div>
                      <div class="updown" style='text-align: left;'>
                        <input name="tagTest" id="tagTest" type="checkbox" @click="setSign('2')"
							v-if='newExamList.length > 0'
							:checked = 'newExamList[currectTypeIndex].data[currectIndex].isSign'
						>
                        标记&nbsp;
                        <input @click="cutQuestion('prev')" class="button_updown" id="lastButton" name="上一题" value="上一题" type="button">
                        &nbsp;
                        <input @click="cutQuestion('next')" class="button_updown" id="nextButton" name="下一题" value="下一题" type="button">
						&nbsp;
                        <input @click="parseImgToggle" class="button_updown" id="nextButton1" name="休息一下" value="休息一下" type="button">
                        &nbsp;
						<input @click="problemFeedback" class="button_updown" id="nextButton2" name="问题反馈" value="问题反馈" type="button">
					  </div>
                    </div>
                  </div>
                </div>
              </div>
              </form>
			  <!-- 保存进度 -->
			<el-dialog
				title="保存进度"
				:visible.sync="isShowSaveProgressDialog"
				width="30%"
				>
				<input type="text" placeholder="给进度起个名字吧" v-model="progressName" style="width:100%;height:36px;">
				<span slot="footer" class="dialog-footer">
					<el-button @click="isShowSaveProgressDialog = false">取 消</el-button>
					<el-button type="primary" @click="submitSaveProgress">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 休息片刻 -->
			<div class="parseBox" @click="parseImgToggle" v-show="isShowParseImg" style="user-select:none">
				<img src="../../static/images/examPause.jpg">
			</div>
			<!-- 问题反馈 -->
			<div v-show="analysisDialogVisible" class="answer-analysis-shadow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;background:#000;opacity:0.3;"></div>
        	<analysisDialog @close="closeAnalysisDialog" :isShowAnswer="false" :isShowAnalysis="true" v-if="analysisDialogVisible" :curQuestion="currectItem.data[currectIndex]" ></analysisDialog>
    </div>
</template>

<script>
import Analyze from '../../components/intermediate/analyze.vue';
import Choose from '../../components/intermediate/choose.vue';
import analysisDialog from '../../components/analysisDialog';
import {getExamPaper,submitExam,saveProgress, getExampaperProgress} from '../../api/exam';
import { STATIC_ADDRESS, BASE_URL } from "@/utils/http.js";
export default {
    name:'exam',
    components:{
      Analyze,
	  Choose,
	  analysisDialog
    },
    data(){
      return{
		// 问题反馈
		analysisDialogVisible:false,
		// 定时器
        finish : "00:00:00",
        timer : '00:00:00',
		time:'',
		// 开始时间
		startTimes:'',
		// 时长
		endTime:'',
		duration:0,
		// 试卷数据
		examData:null,
		newExamList:[],
		paperId:'',
		// 答案
		answer:[],
		// 显示左侧答题卡
		showleft:true,
		// 右侧高度变化，左侧宽度变化等
        iframeHeight:window.screen.availHeight*0.9-40,
        leftWidth:window.screen.availWidth*0.2+'px',
        leftsidemainWidth:null,
		maxW:window.screen.availWidth*0.2,
		// 当前项
		currectItem:null,
		currectIndex:0,
		// 当前题型下标
		currectTypeIndex:0,
		// 判断去掉空标签
		reg : /<[^>]*>[\s]*<\/[^>]*>/g,
		// 个人信息
		nickName:'',
		gender:'',
		categoryName:'',
		subjectName:'',
		imagePath:'',
		// 保存进度
		isShowSaveProgressDialog:false,
		progressName: "", //进度名字，
		isShowParseImg:false, //休息片刻
      }
	},
	created(){
		this.nickName = localStorage.getItem('nickname')
		this.gender = localStorage.getItem('gender')
		this.categoryName = localStorage.getItem('categoryName')
		this.subjectName = localStorage.getItem('subjectName')
		this.paperId = this.$route.query.id;
		if (localStorage.getItem('imagePath')) {
			this.imagePath = STATIC_ADDRESS + "/" + localStorage.getItem('imagePath');
		} else {
			this.imagePath = false;
		}
		const loading = this.$loading({
			lock: true,
			text: "Loading",
			spinner: "el-icon-loading",
			background: "rgba(0, 0, 0, 0.7)"
		});
		if(this.$route.query.progressID){
			console.log('progress')
			getExampaperProgress(this.$route.query.progressID)
			.then(res=>{
				if(res.code == 200){
					this.endTime = res.data.duration
					this.setTime(parseInt(res.data.duration / 60),res.data.duration % 60);
					this.startTimes = this.crtTimeFtt(new Date());
					let obj = {};
					for(let i in res.data){
						if(typeof(res.data[i]) == 'object' && res.data[i]!=null){
							obj[i] = res.data[i]
						}
					}
					this.examData = obj || {};
					this.alterData();
					this.startTime();
					loading.close();
				}else{
					this.$message.error(res.msg);
					loading.close();
				}
			})
		}else{
			getExamPaper(this.paperId)
			.then(res=>{
				if(res.code == 200){
					this.endTime = res.data.time * 60
					this.setTime(res.data.time);
					this.startTimes = this.crtTimeFtt(new Date());
					let obj = {};
					for(let i in res.data){
						if(typeof(res.data[i]) == 'object' && res.data[i]!=null){
							obj[i] = res.data[i]
						}
					}
					this.examData = obj || {};
					this.alterData();
					this.startTime();
					loading.close();
				}else{
					this.$message.error(res.msg);
					loading.close();
				}
			})
		}
		this.$message({
			showClose: true,
			message: '请按F11全屏显示考试页面再进行答题！',
			type: 'success',
			duration:0
		});
	},
    methods:{
		// 问题反馈
			// 打开
		problemFeedback(){
			this.analysisDialogVisible = true;
		},
			// 关闭
		closeAnalysisDialog(){
			this.analysisDialogVisible = false;
		},
		//暂停
		parseImgToggle() {
			this.isShowParseImg = !this.isShowParseImg;
			if (this.isShowParseImg) {
				clearInterval(this.time);
			} else {
				this.startTime();
			}
		},
		// 保存进度
		savePrograss(){
			clearInterval(this.time);
			//保存进度dialpg
			this.$confirm('保存进度不会进行判卷，请知晓！点击"确定"后继续')
			.then(_ => {
				this.isShowSaveProgressDialog = true;
			})
			.catch(_ => {
				this.startTime();
			});
		},
		async submitSaveProgress(){
			let progress = {
				name:this.progressName,
				duration:this.endTime - this.duration,
				paperId:this.paperId,
				questionProgresses:this.answer
			}
			await saveProgress(progress)
			.then(res=>{
				if(res.code == 200){
					this.$message({
						type:"success",
						message:"保存进度成功！"
					})
				}else{
					this.$message.error('保存进度失败请重试！')
				}
			})
			.catch(err=>{
				this.$message.error('保存进度失败请重试！')
			})
			this.startTime();
			this.isShowSaveProgressDialog = false;
			this.progressName = '';
		},
		// 提交试卷
		submitPaper(){
			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			});
			let params = {
				duration:this.duration,
				paperId:this.paperId,
				questions:this.answer,
				startTime:this.startTimes
			}
			submitExam(params)
			.then(res=>{
				if(res.code == 200){
					loading.close();
					this.$message({
						type: 'success',
						message: '提交成功!'
					});
					this.$router.push({path:'/intermediateEnd',query:{paperID:this.paperId,paperRecordId:res.data.paperRecordId}});
				}else{
					loading.close();
					this.$message({
						type: 'warning',
						message: '提交失败,请重试!'
					});
				}
			})
		},
		// 交卷
		handPaper(type){
			clearInterval(this.time);
			if(type == '0'){
				this.$confirm('是否要提交试卷?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					this.submitPaper();
				})
				.catch(() => {
					this.startTime();
				});
			}else if(type == '1'){
				this.submitPaper();
			}
		},
		// 上一题下一题
		cutQuestion(type){
			let length = this.newExamList[this.currectTypeIndex].data.length;
			if(type == 'next'){
				if(this.currectIndex < length - 1){
					this.currectIndex += 1
				}else if(this.currectIndex == length - 1){
					this.currectIndex = 0
					this.currectTypeIndex += 1
				}
			}else{
				if(this.currectIndex > 0) this.currectIndex  -= 1
				else{
					if(this.currectTypeIndex > 0){
						this.currectTypeIndex -= 1
						this.currectIndex = this.newExamList[this.currectTypeIndex].data.length - 1
					}
				}
				
			}
			this.currectItem = this.newExamList[this.currectTypeIndex]
		},
		// 处理左侧标记显示
		setSign(type){
			if(type < 2){
				this.newExamList[this.currectTypeIndex].data[this.currectIndex].isMake = type;
			}else{
				this.newExamList[this.currectTypeIndex].data[this.currectIndex].isSign = !this.newExamList[this.currectTypeIndex].data[this.currectIndex].isSign
			}
		},
		// 添加简答题要求答案
		setAnswer(data){
			let an = JSON.parse(data);
			let obj = this.newExamList[this.currectTypeIndex].data[this.currectIndex]
			obj.children[an.index].answer = an.item;
			this.newExamList[this.currectTypeIndex].data.splice(this.currectIndex,1,obj)
		},
		//计算器
		showCal(){
			try {
				var objShell = new ActiveXObject("wscript.shell");
				objShell.Run("calc");
				objShell = null;
			}
			catch (e){
				alert('不能正确打开计算器，请自行启动系统计算器')
			}
		},
		//收起展开题号栏
		showSub(index){
			let obj = this.newExamList[index];
			obj.showsubs = !this.newExamList[index].showsubs;
			this.newExamList.splice(index,1,obj);
      	},
      	//是否显示左侧
      	toggle(){
        	this.showleft = !this.showleft;
      	},
		// 设置时间
		setTime(time,s1=59){
			let h = parseInt(time / 60);
			let m = time % 60;
			if(s1 < 10) s1 = '0'+s1
			let s = s1;
			if(h < 10) h = '0'+h
			if(m == 0) {s = '00';m = '00'}
			else if(m == 1) m == '00'
			else if(m < 10 && m > 1) m = '0'+(m - 1)
			else if( m > 9) m = m - 1
			this.timer = `${h}:${m}:${s}`
			// this.timer = '00:05:10'
		},
		  //倒计时
		onTimer(){
			var hms = this.timer.split(':');
			var s = new Number(hms[2]);
			var m = new Number(hms[1]);
			var h = new Number(hms[0]);
			s -= 1;
			if (s < 0) {
				s = 59;
				m -= 1;
			}
			if (m < 0) {
				m = 59;
				h -= 1;
			}
			var ss = s < 10 ? ("0" + s) : s;
			var sm = m < 10 ? ("0" + m) : m;
			var sh = h < 10 ? ("0" + h) : h;
			this.timer = sh + ":" + sm + ":" + ss;
		},
		// 开始倒计时
		startTime(){
			//倒计时
			this.time = setInterval(()=>{
				this.onTimer();
				this.duration ++;
				if(this.timer == '00:30:00'){
					this.$message({
						type:"warning",
						message:'还有半小时答题时间，请注意把握时间',
						duration:5000
					})
				}
				if(this.timer == '00:05:00'){
					this.$message({
						type:"warning",
						message:'还有5分钟答题时间，请注意把握时间',
						duration:5000
					})
				}
				if(this.timer == this.finish){
					this.handPaper('1');
					clearInterval(this.time)
				}
			},1000)
		},
		crtTimeFtt(val) {
		//格式化时间
		if (val != null) {
			var date = new Date(val);
			return (
			this.myformatter(date.getFullYear()) +
			"-" +
			this.myformatter(date.getMonth() + 1) +
			"-" +
			this.myformatter(date.getDate()) +
			" " +
			this.myformatter(date.getHours()) +
			":" +
			this.myformatter(date.getMinutes()) +
			":" +
			this.myformatter(date.getSeconds())
			);
		}
		},
		myformatter(val) {
			//补位
			if (val < 10) {
				return "0" + val;
			} else {
				return val;
			}
		},
		// 点击左侧答题卡
		clickA(item,num,index){
			this.currectItem = item;
			this.currectIndex = num;
			this.currectTypeIndex = index;
		},
		// 获答案
		getAnswer(an){
			let index = -1;
			for(let i = 0;i<this.answer.length;i++){
				if(this.answer[i].questionId == an.questionId){
					index = i
					break;
				}
			}
			if(index == -1 || this.answer.length == 0){
				if(an.answers.length > 0) this.answer.push(an)
			}else{
				if(an.answers.length > 0) this.answer[index] = JSON.parse(JSON.stringify(an))
				else this.answer.splice(index,1);
			}
			// console.log(this.answer)
		},
		//修改原始数据
		alterData(){
			for(let value in this.examData){
				let obj = {};
				obj.type = '';
				obj.data = this.examData[value];
				if(this.examData[value].length > 0){
					obj.showsubs = true;
					obj.type = this.examData[value][0].type;
					obj.data.forEach((item,index)=>{
						this.delCounter++;
						item.showAnswer = false;
						item.isMake = '0';
						item.isSign = false;
						if(item.type < 4 && item.userAnswer != null){
							item.isMake = '1';
							item.userAnswer.split(',').forEach((ans)=>{
								item.options.forEach((val,num)=>{
									if(ans == val.optionName){
										val.check = true
									}
								})
							})
							this.getAnswer({
								questionId:item.questionId,
								answers:item.userAnswer.split(',')
							})
						}
						if(item.type > 3){
							item.children.forEach(val=>{
								val.title = this.regBlank(val.title);
								val.showAnswer = false;
								val.answer = ''
								if(val.userAnswer != null){
									val.answer = val.userAnswer
									item.isMake = '1'
									let obj = {
										questionId:val.questionId,
										answers:[]
									}
									obj.answers[0] = val.answer
									this.getAnswer(obj)
								}else if(val.template){
									val.answer = val.template
								}
							})
						}
					})
				}
				switch(value){
					case 'radio':
						obj.questionTypes = '单选题';
						obj.typesIntro = '每小题只有一个正确答案，请从每小题的备选答案中选出一个你认为最正确的答案，用鼠标点击相应的选项。';
						break;
					case 'multiples':
						obj.questionTypes = '多选题';
						obj.typesIntro = '每小题均有两个以上的正确答案，请从每小题的备选答案中选出你认为正确的答案，用鼠标点击相应的选项。每小题所有答案选择正确的得分，不答、错答、漏答均不得分。';
						break;
					case 'indefinite':
						obj.questionTypes = '不定项选择题';
						obj.typesIntro = '每小题至少有一个正确答案，请从每小题的备选答案中选出你认为正确的答案，用鼠标点击相应的选项。每小题所有答案选择正确的得分，不答、错答、漏答均不得分。';
						break;
					case 'judgments':
						obj.questionTypes = '判断题';
						obj.typesIntro = '请判断每小题的表述是否正确。';
						break;
					case 'showAnswers':
						obj.questionTypes = '简答题';
						obj.typesIntro = '其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。';
						break;
					case 'calculations':
						obj.questionTypes = '计算分析题';
						obj.typesIntro = '其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。涉及计算的，要求列出计算步骤，否则不得分，除非题目特别说明不需要列出计算过程。';
						break;
					case 'comprehensives':
						obj.questionTypes = '综合题';
						obj.typesIntro = '涉及计算的，要求列出计算步骤，否则不得分，除非题目特别说明不需要列出计算过程。';
						break;
					case 'calculationAnswers':
						obj.questionTypes = '计算问答题';
						obj.typesIntro = '涉及计算的，要求列出计算步骤，否则不得分，除非题目特别说明不需要列出计算过程。';
						break;
					case 'caseStudies':
						obj.questionTypes = '案例分析题';
						obj.typesIntro = '其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。';
						break;
					default:
						break;
				}
				this.newExamList.push(obj);
			}
			this.currectItem = this.newExamList[0];
		},
		// 处理空标签
		regBlank(str){
			str = str.replace(this.reg,"")
			if(this.reg.test(str)){        
				regBlank(str)
			}else{
				return str  
			}
		},
    },
    beforeDestroy(){
        clearInterval(this.time);
        // window.onbeforeunload = null;
    },
    mounted(){
		
      //刷新提示
      window.onbeforeunload = function (e) {
          e = e || window.event;
          if (e) {
          e.returnValue = '关闭提示';
          }
          return '关闭提示';
      }
      //让右侧的高度随着屏幕变化而变化
      let that = this;
      that.maxW = window.screen.availWidth*0.2;
      that.leftsidemainWidth = that.maxW+15;
      that.leftsidemainWidth = that.leftsidemainWidth + 'px';
      window.onresize = () => {
        return (() =>{
            that.iframeHeight = window.screen.availHeight*0.9-40;
            that.leftWidth = that.maxW+"px";
            that.leftsidemainWidth = that.maxW+15;
            that.leftsidemainWidth = that.leftsidemainWidth + 'px';
        })()
      }
    },
    watch:{
      iframeHeight(val){
        this.iframeHeight = val
      },
      maxW(val){
        this.maxW = val;
        this.leftWidth = that.maxW+"px";
        this.leftsidemainWidth = this.maxW+15;
        this.leftsidemainWidth = this.leftsidemainWidth + 'px';
      }
    }
}
</script>

<style lang="scss" scoped>
@charset "utf-8";
/* CSS Document */
body {
	margin: 0px;
	padding: 0px;
	margin: 1px;
	font-family: "宋体";
	background-color:#ddebf6
}
ul, li,em{
	margin: 0px;
	padding: 0px;
	list-style: none;
	display:block;
	font-style:normal;
}
.block {
	display: block;
}
.none {
	display: none;
}
#layout {
	position: fixed;
	height: 100%;
	width: 100%;
	vertical-align: top;
}
#header {
	overflow: hidden;
	height: 100px;
	width: 100%;
	text-align: center;
	background: url('../../assets/images/pic_02.png') repeat-x;
	color: #FFF;
	font-size: 16px;
	font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";
	font-weight: bold;
	line-height: 25px;
}
.infoNav_2 {
	float: left;
	/* height: 100px; */
	text-align: left;
	margin-left: 10px;
	margin-top:0px;
}
.infoNav_2 li {
	float: left;
}

.infoNav_2 li img {
	border: 1px solid #FFF;
}
.infoNav_2 a:link {
	color: #FFF;
	text-decoration: none;
}
.infoNav_2 a:visited {
	text-decoration: none;
	color: #FFF;
}
.infoNav_2 a:hover {
	text-decoration: underline;
	color: #FFF;
}
.infoNav_2 a:active {
	text-decoration: none;
	color: #FFF;
}
.subjectNav {
	font-family: "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";
	font-size: 22px;
	line-height: 42px;
	text-align: center;
	width: auto;
	margin-top: 23px;
}
.subjectNav b {
	color: #fbce7f;
}
.clockNav {
	float: right;
	width: 225px;
	margin-right: 35px
}
.clockNav li {
	float: right;
	margin-top: 10px
}
.clockNav ul {
	clear: both;
	width: 225px;
	padding: 0px auto;
	text-align: center;
	margin-top: 10px
}
.clockNav_r {
	width: 8px;
	height: 52px;
	/* background: url(../img/pic_03.png) no-repeat; */
}
.clockNav_m {
	width: 207px;
	height: 52px;
	/* background: url(../img/pic_04.png) repeat-x; */
	line-height: 52px;
	font-size: 16px;
	font-weight: bolder;
	color: #F00;
	text-align: center
}
.clockNav_l {
	width: 8px;
	height: 52px;
	/* background: url(../img/pic_05.png) no-repeat; */
}
.submitbutton {
	width: 81px;
	height: 31px;
	background: url('../../assets/images/submit.gif') repeat-x;
	border: 1px solid #cc6600;
	color:#000000;
	line-height:29px;
	font-size:13px;
	cursor: pointer;
	margin-right:21px;
}
.info_xx {
	width: 80px;
	height: 31px;
	/* background: url(../img/submit.gif) repeat-x; */
	border: 1px solid #cc6600;
	color:#000000;
	line-height:29px;
	font-size:13px;
	cursor: pointer;
	margin-right:20px;
}
.enternextbutton {
	width: 141px;
	height: 43px;
	font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";
	font-size: 16px;
	line-height:43px;
	font-weight:bold;
	color:#FFFFFF;
	/* background: url(../img/enternextbutton.png) no-repeat; */
	border: none;
	cursor: pointer
}
#main {
	width: 100%;
	height: 100%;
}
#container {
	width: auto;
	height: 99%;
	overflow-y: hidden;
	background-color: #ddebf6;
}
#container>div {
	margin-left: 3px;
	width: 100%;
	height: 100%;
	border: 1px solid #9fb7f7;
	border-top:none;
	background-color: #ddebf6;
}
#leftside{
	float: left;
	width: 322px;
	height:100%;
	overflow:hidden;
  background-color: #ddebf6;
}
#leftsidemain{
	float: left;
	width: 310px;
	height: 100%;
	border:1px solid #9fb7f7;
	border-top:none;
	overflow:hidden;
	background-color:#eff6fe;
}
.middlebar{ float:left; width:10px; height:300px; padding-top:200px; text-align:left}
.middlebar input{ width:9px; height:61px; border:none; cursor:pointer; 
	background:url('../../assets/images//bar2.gif') no-repeat;}
#leftside_hiddens {
	float: left;
	width: 9px;
	height: 100%;
	overflow:hidden;
	border-left:1px solid #9fb7f7;
	padding-top:200px;
}
#leftside_hiddens input {
	display:block;
	width:9px;
	height:61px;
	border:none;
	cursor:pointer;
    background:url('../../assets/images/bar.gif') no-repeat;
}

.top_bar{ float:right; width:100%;height:1px;background:#78bbfe; padding-top:3px; text-align:right; }
.top_bar input{ width:92px; height:26px; border:none; cursor:pointer;
	 /* background:url(../img/sq.png) no-repeat; */
	 position:absolute;right:5px;}
#header_hidden {
	float: right;
	width: 92px;
	height: 100%;
	display: none;
	overflow:hidden;	
	padding-top:0px;position:absolute;right:5px;
}
#header_hidden input {
	/* display:block;	 */
	width:92px;
	height:26px;
	border:none;
	cursor:pointer;
	/* background:url(../img/zk.png) no-repeat; */
	right:5px;
}



.toggleCollapse {
	/* background: url(../img/left_toptab2.gif) repeat-x; */
	color: #2579b7;
	font-size: 14px;
	font-weight: bolder;
	font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";
	height: 37px;
	_height:39px;
	line-height: 39px;
	text-align: center;
	width:100%;
	padding-top:2px;
}
.toggleCollapse em{width:154px; height:37px; line-height:37px; float:left; z-index:0; cursor:pointer}
.left_toptab1{
	/* background: url(../img/left_toptab1.gif) repeat-x;  */
	color:red;font-size: 16px;}
#mainsub {
	width:100%

}
#sub{ text-align:center; width:100%; padding:0px; margin:0px}
#sub li {
	width: 98%;
	text-align: left;
	margin: 1px auto 0px auto;
	padding:0px 5px 0px 5px;
}
#sub li a{ display:block; padding:0 5px; height:28px; line-height:26px;
text-align:center; font-size:14px; font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";
font-weight:normal; border:1px solid #FFF; background-color:#ddebf6; float:left;text-decoration-line: underline;color:#00F}
#sub li a:hover{ color:#00F}
#sub li a:visited{color:#00F}
#sub li a b{color:#F00}
.subHide,.subShow{ display:block; width:98%; height:28px; line-height:28px; color:#000000; text-align:left; text-decoration:none; font-size:14px;font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53"; margin-right:10px;}
.subHide{ background: url('../../assets/images/subShow.gif') no-repeat right 8px;}
.subShow{ display:block; background: url('../../assets/images/subHide.gif') no-repeat right 8px;}
.submenu {
	background: url('../../assets/images/left_menu_bg.gif') repeat-x;
	color: #000000;
	font-size: 14px;
	width:100%;
	float:left;
	clear:both;
	font-weight: bolder;
	font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";
}

#mainsub0 li ul li{
	display:block;

}
#mainsub0 li ul.myHide,#subHide{
	display:none;
}
#mainsub0 li ul.myShow,#subShow{
	display:block;
}
#mainsub1 li ul li{
	display:block;

}
#mainsub1 li ul.myHide,#subHide{
	display:none;
}
#mainsub1 li ul.myShow,#subShow{
	display:block;
}
.submark {
	clear:both;
	margin: 0px auto 0px 5px;
	padding-top:5px;
	text-align:left;
	font-size:13px;
	color:#F00;
	line-height:18px;
	font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";
}
.subcal{ width:98px; height:38px; display:block; clear:both; margin:10px auto auto auto;}
.subcal input{ width:98px; height:38px; 
background:url('../../assets/images/calculator.png') no-repeat; 
cursor:pointer; border:none;}

.markst{
	 /* background:url(../img/n_42.gif) repeat-x; */
	  width:100%; height:29px;}
.markst li{ float:left; display:block}
.markst li a{ display:block; width:58px; height:21px; 
	/* background:url(../img/pic_39.jpg) no-repeat; */
	 float:left; margin:4px 2px auto 0px; color:#000000; font-size:12px; line-height:21px; text-align:center; text-decoration:none}
.markst li a:hover{ text-decoration:none}
.markst_1{float:left; height:29px; margin-right:6px; width:109px; font-size:14px; font-weight:bolder; line-height:29px;
	 /* background:url(../img/markst.png) no-repeat;  */
	 text-align:center}
.test_bt{ font-weight: bold; color:#333333; font-size:14px; line-height:20px; padding:5px; margin:0px }
.calculator {
	width: 98px;
	margin: 20px auto;
	display: block;
}
.calculator a img {
	border: 0px;
}
.test_title_zht {
	font-size: 14px;
	font-weight: bold;
	height: 32px;
	line-height: 32px;
	/* background: url(../../assets/images/zht_03.gif) repeat-x; */
	border-bottom: 1px solid #9fb7f7;
	padding-left: 10px 
}
.test_title {
	border-bottom: 1px solid #9fb7f7;
}
.ask_title, .test_title {
	font-size: 14px;
	font-weight: bolder;
	padding-left: 7px;
	line-height: 29px;
	height: 29px
}
.test_title b, .test_title_zht b {
	font-size: 12px;
	font-weight: normal;
}
.test_title li {
	display: block;
}
#test {
	cursor: s-resize
}

.test_content {
	line-height: 36px;
	border-top: 1px solid #9fb7f7;
	padding: 15px;
}

.button_updown {
	background: url('../../assets/images/pic_39.jpg') no-repeat;
	width: 58px;
	height: 21px;
	text-align: center;
	border: none;
	line-height: 20px;
	cursor: pointer
}
.updown {
	margin: 0px auto auto 30px;
	line-height: 21px;
	font-size: 14px;
	_position:relative;
	_bottom:0px;
	_left:0px;
	_width:400px;
}
#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
	height: 28px;
	background-color: #ddebf6;
	border: 1px solid #9fb7f7;
	font-size: 12px;
	line-height: 28px
}
.login_layout {
	height: 291px;
	width:526px;
	margin:200px auto auto auto;
	/* background: url(../img/wzh.png) no-repeat; */
}
.login_main{
	width: 307px;
	height:169px;
	margin: 0px 0px 0px 200px;
	padding-top:90px;
}
.login_main ul li {
	margin-bottom: 8px;
	clear: both;
	text-align:left;
}
.login_main ul b {
	font-weight: normal;
	font-size: 14px;
	line-height: 30px;
	margin-left: 0px
}
#login, #reset {
	width: 72px;
	height: 25px;
	border: 0px;
	cursor: pointer
}
#login {
	/* background: url(../img/login_01.gif);  */
	margin-left:80px;
}

#zjhm, #glmm {
	margin-bottom: 20px
}
#glmm {
	display: none
}
.ksxz_layout {
	width: 1024px;
	overflow: hidden;
	margin: 10px auto;
	color: #FFF;
	font-size: 14px;
	height: 768px;
	padding-top: 15px;
	/* background: url(../img/end.jpg) no-repeat; */
}
.ksxz_bt {
	margin:30px auto 10px auto; width:598px; height:31px; clear:both;
	 /* background:url(../img/bt.png) no-repeat; */
}
.ksxz_clockNav {
	width: 255px;
	height:50px;
	float:right;
	line-height:50px;
	/* background:url(../img/bt_time.jpg) no-repeat; */
	margin:40px 80px auto 0px;
	padding-left:55px;
}
.ksxz_clockNav li{ float:left; color:#F00; font-size:20px; font-weight:bolder; line-height:50px;}
.ksxz_main {
	clear: both;
	width: 939px;
	margin:0px auto auto auto;
	background: #FFFFFF;
}
.rtop, div.rbottom {
	display: block;
	background: #c0dae7
}
.rtop div, div.rbottom div {
	display: block;
	height: 1px;
	overflow: hidden;
	background: #FFF
}
.r1 {
	margin: 0 5px
}
.r2 {
	margin: 0 3px
}
.r3 {
	margin: 0 2px
}
.rtop div.r4, div.rbottom div.r4 {
	margin: 0 1px;
	height: 2px
}
.ksxz_contain {
	line-height: 34px;
	font-size: 14px;
	margin: 8px;
	font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";
}
.testend {
	width: 1024px;
	height: 750px;
	border: 1px solid #699dbe;
	margin: 0px auto;
	background-color: #83c4ee
}
.tipk {
	height: 3px;
	background-color: #9fb7f7;
	width: 100%;
}
#tipk {
	line-height: 17px;
	background: #ddebf6;
	text-align: center;
	z-index: 2;
	background: none repeat scroll 0 0 #fff;
	color: #f00;
	font-size: 12px;
	line-height: 24px;
	position: absolute;
	right: 20px;
	top:0px;
	height: 24px;
	width: 60px;
	padding:0px 5px;
	-moz-border-radius: 2px;/*低版本Firefox浏览器 圆角*/
	-webkit-border-radius: 2px;/*低版本Chorme和Safari浏览器 圆角*/
	border-radius: 2px;/*其他浏览器 圆角*/
	/*behavior: url(tool_iecss3.htc);IE浏览器 圆角*/
	border:1px solid #9fb7f7;
	
}
#tipk i {
	border-right: 8px solid transparent;
	border-top: 6px solid #9fb7f7;
	height: 0;
	left: 6px;
	position: absolute;
	top: 25px;
	width: 0;
}
.block_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color:grey;
	z-index: 100;
	filter:alpha(opacity=80);  /* ie 有效*/
	-moz-opacity:0.8; /* Firefox  有效*/
	opacity: 0.8;/* 通用，其他浏览器  有效*/
}
.div_content {
	display: none;
	position: absolute;
	top:36%;
	left:36%;
	width: 526px;
	height: 291px;
	z-index: 101;
}
.dialog_main{ background:url('../../assets/images/ts_d.gif') no-repeat; height:291px; width:526px;}
.dialog_main li{list-style:none; padding:0px; margin:0px; display:block}
.dialog_bt{ background:url('../../assets/images/ts_1.gif') no-repeat; height:40px; width:450px; clear:both; display:inline-block; margin:24px auto auto 30px;_margin:24px auto auto 40px}
.dialog_img{  background:url('../../assets/images/ts_2.gif') no-repeat;width:130px; height:135px; display:inline-block; margin:25px 0px auto 45px;_margin:25px 0px auto 25px}
.dialog_content{ float:left; margin:40px auto auto 40px}
.dialog_text{ width:280px; height:160px; display:block; font-size:16px; font-weight:bolder; line-height:24px; font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53"; margin:0px auto 0px 0px;height:60px;}
.dialog_button{ position:relative; left:0px; top:20px;text-align: center}
.dialog_button a,.dialog_button img{ border:none; text-decoration:none}


/*考生信息样式*/

.ks_info{ margin:0 auto; width:526px; height:291px; 
	/* background:url(../img/ts_d.gif) no-repeat; */
}
.ks_info .info2 {
	 height:30px;
}
.ks_info table {
	width: 92%; font-size: 14px;font-family:"微软雅黑", "黑体";
}
.ks_info th {
	width: 100px; text-align: right; font-weight: bold;
}
.ks_info th .block {
	width: 29px; display: inline-block;
}
.ks_info th {
	padding: 5px;
}
.ks_info td {
	padding: 5px;
}
.ks_info td span {
	text-align: center; color: rgb(78, 92, 118); border-bottom-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; display: block;
}
.ks_info .td-photo {
	width: 160px; text-align: center;
}
.ks_info .td-photo img {
	width: 104px;
}
.ks_info .title_txt{ height:60px; line-height:60px; margin-left:30px; color:#F00; font-size:18px; font-weight:bold; font-family:"微软雅黑", "黑体";}
.ks_info img{border:none;}
/*考生信息样式end*/
.testBox{
  overflow: hidden;
}
#leftside{
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
}
.parseBox {
    //休息片刻
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 100vh;
    z-index: 1;
    margin: auto;
  }
</style>
